<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>若依介绍</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
    <th:block th:include="include :: header('百度ECharts')"/>

</head>

<body class="gray-bg">
<div style="height: 100%;width: 1800px">
    <div style=" height: 70%;" class="echarts bottom" id="echarts-line-chart"></div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: echarts-js"/>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:inline="javascript">
    $(function () {
        var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
        option = {
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: [[${names}]],
                    //竖向显示名字
                    axisLabel: {
                        interval: 0,
                        formatter: function (value) {
                            if ([[${len}]] > 30) {

                                return value.split("").join("\n");
                            } else {
                                return value
                            }
                        }
                    },
                    axisTick: {
                        interval: 0,
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'

                }
            ],

            series: [
                {
                    name: '直接访问',
                    type: 'bar',
                    barWidth: '60%',
                    data: [[${orderNums}]],
                }
            ],
            barMaxWidth: 50,
            dataZoom: {
                show: true, // 为true 滚动条出现
                realtime: true,
                type: 'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
                height: 20, // 表示滚动条的高度，也就是粗细
                start: 1, // 表示默认展示20%～80%这一段。
                end: 50
            }
        };

        /*    option = {
                tooltip: {},
                legend: {},
                xAxis: {
                   // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
                    data: [[${names}]]
                },
                dataZoom: [{
                    type: 'slider',
                    show: true,
                    xAxisIndex: [0],
                    start: 10,
                    end: 900 //初始化滚动条
                }],
                yAxis: {},
                barMaxWidth:50,
                barGap: 30,
                series: [{
                    name: "员工工作状态统计图",
                    type: "bar",
                    // data: [5, 20, 36, 1110, 10, 20, 4]
                    data: [[${orderNums}]],
                    barWidth:30,//设置柱状图宽度
                }]
            }*/
        lineChart.setOption(option);
        $(window).resize(lineChart.resize);
    });
</script>
</body>
</html>
